<template>
  <div class="body_all">
    <div class="ba_top">
      <div>
        <el-date-picker
          v-model="searchList.time"
          size="mini"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
        <el-select
          v-if="activeName == 'group'"
          v-model="searchList.nametype"
          :placeholder="groupType == 2 ? '标签名称' : '群类型'"
          size="mini"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button
          style="margin-left: 8px"
          type="primary"
          icon="el-icon-search"
          size="mini"
          >搜索</el-button
        >
        <el-button
          type="refresh"
          icon="el-icon-refresh"
          @click="btnRefresh"
          size="mini"
          >重置</el-button
        >
      </div>
    </div>
    <div class="ba_main">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="联系人分析" name="contacts">
          <el-button
            :type="contactsType == 0 ? 'primary' : ''"
            size="mini"
            @click="contactsType = 0"
            >联系人总览</el-button
          >
          <el-button
            :type="contactsType == 1 ? 'primary' : ''"
            size="mini"
            @click="contactsType = 1"
            >联系人跟进状态分析</el-button
          >
          <el-button
            :type="contactsType == 2 ? 'primary' : ''"
            size="mini"
            @click="contactsType = 2"
            >联系人来源分析</el-button
          >
          <el-button
            :type="contactsType == 3 ? 'primary' : ''"
            size="mini"
            @click="contactsType = 3"
            >新增好友分析</el-button
          >
          <el-button
            :type="contactsType == 4 ? 'primary' : ''"
            size="mini"
            @click="contactsType = 4"
            >企微标签分析</el-button
          >
          <el-button
            :type="contactsType == 5 ? 'primary' : ''"
            size="mini"
            @click="contactsType = 5"
            >业务标签分析</el-button
          >
          <!-- 联系人总览&联系人跟进状态 -->
          <div
            v-show="
              activeName == 'contacts' &&
              (contactsType == 0 || contactsType == 1)
            "
          >
            <div
              v-show="contactsType == 0"
              class="echart"
              id="mychart"
              style="height: 400px"
            ></div>
            <div
              v-show="contactsType == 1"
              class="echart"
              id="lxr_gj_mychart"
              style="width: 500px; height: 300px"
            ></div>
            <h4>员工明细</h4>
            <el-table
              :data="tableData"
              show-summary
              tooltip-effect="dark"
              class="tabSummary"
              style="width: 100%"
            >
              <el-table-column prop="date" label="员工" flex="left">
              </el-table-column>
              <el-table-column prop="date" label="跟进联系人数">
              </el-table-column>
              <el-table-column prop="name" label="线索"> </el-table-column>
              <el-table-column prop="address" label="潜在"> </el-table-column>
              <el-table-column prop="date" label="有效"> </el-table-column>
              <el-table-column prop="date" label="待签"> </el-table-column>
              <el-table-column prop="date" label="成单"> </el-table-column>
              <el-table-column prop="date" label="丢单"> </el-table-column>
              <el-table-column prop="date" label="复购"> </el-table-column>
              <el-table-column prop="date" label="无效"> </el-table-column>
            </el-table>
            <div class="footerPage">
              <i class="el-icon-arrow-left"></i>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
          <!-- 联系人-联系人来源 -->
          <div v-show="activeName == 'contacts' && contactsType == 2">
            <div
              class="echart"
              id="lxr_source_mychart"
              style="width: 900px; height: 300px"
            ></div>
            <h4>员工明细</h4>
            <el-table
              :data="tableData"
              show-summary
              tooltip-effect="dark"
              class="tabSummary"
              style="width: 100%"
            >
              <el-table-column prop="date" label="员工" flex="left">
              </el-table-column>
              <el-table-column prop="date" label="电话销售">
              </el-table-column>
              <el-table-column prop="name" label="陌拜销售"> </el-table-column>
              <el-table-column prop="address" label="客户介绍">
              </el-table-column>
              <el-table-column prop="date" label="网络推广">
              </el-table-column>
              <el-table-column prop="date" label="渠道代理"> </el-table-column>
              <el-table-column prop="date" label="客户资讯"> </el-table-column>
              <el-table-column prop="date" label="其他"> </el-table-column>
            </el-table>
          </div>
          <!-- 联系人-好友分析 -->
          <div v-show="activeName == 'contacts' && contactsType == 3">
            <div
              class="echart"
              id="lxr_hyfx_mychart"
              style="width: 900px; height: 300px"
            ></div>
            <h4>新增好友明细表</h4>
            <el-table
              :data="tableData"
              show-summary
              tooltip-effect="dark"
              class="tabSummary"
              style="width: 100%"
            >
              <el-table-column prop="date" label="日期" flex="left">
              </el-table-column>
              <el-table-column prop="date" label="申请加好友次数">
              </el-table-column>
              <el-table-column prop="name" label="新增好友"> </el-table-column>
              <el-table-column prop="address" label="主动删除好友">
              </el-table-column>
              <el-table-column prop="date" label="被好友删除">
              </el-table-column>
              <el-table-column prop="date" label="重置好友"> </el-table-column>
            </el-table>
          </div>
          <!-- 企微标签 -->
          <div v-show="activeName == 'contacts' && contactsType == 4">
            <div id="Qwlabel">
              <div class="Qw1">
                <span>联系人分组：100</span>
                <div
                  class="echart"
                  id="qw_grouping_mychart"
                  style="width: 280px; height: 350px"
                ></div>
              </div>
              <div class="Qw1">
                <span>微信好友状态：200</span>
                <div
                  class="echart"
                  id="qw_weixin_mychart"
                  style="width: 280px; height: 350px"
                ></div>
              </div>
              <div class="Qw1">
                <span>需求重点：200</span>
                <div
                  class="echart"
                  id="qw_key_mychart"
                  style="width: 280px; height: 350px"
                ></div>
              </div>
              <div class="Qw1">
                <span>联系人特征：150</span>
                <div
                  class="echart"
                  id="qw_features_mychart"
                  style="width: 280px; height: 350px"
                ></div>
              </div>
              <div class="Qw1">
                <span>客户行业：356</span>
                <div
                  class="echart"
                  id="qw_industry_mychart"
                  style="width: 280px; height: 350px"
                ></div>
              </div>
            </div>
          </div>
          <!-- 业务标签分析 -->
          <div v-show="activeName == 'contacts' && contactsType == 5">
            <div id="extension">
              <span>推广</span>
              <div class="e_main">
                <div
                  class="eColumnar"
                  id="eColumnar"
                  style="width: 280px; height: 350px"
                ></div>
                <div class="eTable">
                  <div style="width: 100%">
                    <el-table
                      :data="tableData"
                      style="width: 100%"
                      height="350"
                    >
                      <el-table-column prop="date" label="员工">
                      </el-table-column>
                      <el-table-column prop="name" label="部门">
                      </el-table-column>
                      <el-table-column prop="address" label="渔利网">
                      </el-table-column>
                      <el-table-column prop="address" label="百度竞价">
                      </el-table-column>
                      <el-table-column prop="address" label="百度百科">
                      </el-table-column>
                      <el-table-column prop="address" label="SEO优化">
                      </el-table-column>
                      <el-table-column prop="address" label="400电话">
                      </el-table-column>
                      <el-table-column prop="address" label="彩铃" width="200">
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
            </div>
            <div id="development">
              <span>开发</span>
              <div class="e_main">
                <div
                  class="eColumnar"
                  id="dColumnar"
                  style="width: 280px; height: 350px"
                ></div>
                <div class="eTable">
                  <div style="width: 100%">
                    <el-table
                      :data="tableData"
                      style="width: 100%"
                      height="350"
                    >
                      <el-table-column prop="date" label="员工">
                      </el-table-column>
                      <el-table-column prop="name" label="部门">
                      </el-table-column>
                      <el-table-column prop="address" label="渔利网">
                      </el-table-column>
                      <el-table-column prop="address" label="百度竞价">
                      </el-table-column>
                      <el-table-column prop="address" label="百度百科">
                      </el-table-column>
                      <el-table-column prop="address" label="SEO优化">
                      </el-table-column>
                      <el-table-column prop="address" label="400电话">
                      </el-table-column>
                      <el-table-column prop="address" label="彩铃" width="200">
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane plain label="企业分析" name="enterprise">
          <h4>新增企业</h4>
          <div
            class="echart"
            id="qy_mychart"
            style="min-width: 900px; height: 300px"
          ></div>
          <el-table :data="tableData" tooltip-effect="dark" style="width: 100%">
            <el-table-column prop="date" label="日期" flex="left">
            </el-table-column>
            <el-table-column prop="date" label="新增企业数"> </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane plain label="群分析" name="group">
          <el-button
            :type="groupType == 0 ? 'primary' : ''"
            size="mini"
            @click="groupType = 0"
            >群数量分析</el-button
          >
          <el-button
            :type="groupType == 1 ? 'primary' : ''"
            size="mini"
            @click="groupType = 1"
            >群成员分析</el-button
          >
          <el-button
            :type="groupType == 2 ? 'primary' : ''"
            size="mini"
            @click="groupType = 2"
            >群标签分析</el-button
          >
          <div
            v-if="activeName == 'group' && groupType == 0"
            id="groupsNumber"
            style="text-align: center"
          >
            <div
              class="eColumnar"
              id="nColumnar"
              style="min-width: 900px; height: 400px"
            ></div>
            <el-button
              :type="group_fzType == 0 ? 'primary' : ''"
              size="mini"
              @click="group_fzType = 0"
              >总数量</el-button
            >
            <el-button
              :type="group_fzType == 1 ? 'primary' : ''"
              size="mini"
              @click="group_fzType = 1"
              >建群数量</el-button
            >
            <el-button
              :type="group_fzType == 2 ? 'primary' : ''"
              size="mini"
              @click="group_fzType = 2"
              >解散数量</el-button
            >
            <el-table
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%; margin-top: 10px"
            >
              <el-table-column prop="date" label="日期"> </el-table-column>
              <el-table-column prop="date" label="群总数"> </el-table-column>
              <el-table-column prop="date" label="建群数量"> </el-table-column>
              <el-table-column prop="date" label="解散数量"> </el-table-column>
            </el-table>
          </div>
          <!-- 群成员分析 -->
          <div
            v-if="activeName == 'group' && groupType == 1"
            id="member"
            style="text-align: center"
          >
            <div
              class="eColumnar"
              id="mColumnar"
              style="min-width: 900px; height: 400px"
            ></div>
            <el-table
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%; margin-top: 10px"
            >
              <el-table-column prop="date" label="日期"> </el-table-column>
              <el-table-column prop="date" label="群人数"> </el-table-column>
              <el-table-column prop="date" label="入群人数"> </el-table-column>
              <el-table-column prop="date" label="邀请入群人数">
              </el-table-column>
              <el-table-column prop="date" label="退群人数"> </el-table-column>
              <el-table-column prop="date" label="净增人数"> </el-table-column>
              <el-table-column prop="date" label="发言人数"> </el-table-column>
              <el-table-column prop="date" label="消息数"> </el-table-column>
            </el-table>
          </div>
          <!-- 群标签分析 -->
          <div
            v-if="activeName == 'group' && groupType == 2"
            id="member"
            style="text-align: center"
          >
            <el-table
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%; margin-top: 10px"
            >
              <el-table-column prop="date" label="标签名称"> </el-table-column>
              <el-table-column prop="date" label="所属标签组">
              </el-table-column>
              <el-table-column prop="date" label="标签下客户群数">
              </el-table-column>
              <el-table-column prop="date" label="最近打标签时间">
              </el-table-column>
              <el-table-column prop="date" label="创建时间"> </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
// 引入图表
import * as echarts from "echarts";
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
      ],
      // 柱状图
      xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
      yData: [23, 24, 18, 25, 27, 28, 25], //数据
      loading: false,
      dialogEditer: false,
      // 搜索条件
      searchList: {
        time: "",
        nametype:"",
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              let end = new Date();
              let start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              let end = new Date();
              let start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              let end = new Date();
              let start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      activeName: "contacts",
      // 联系人分析-类型
      contactsType: 0,
      // 群分析-类型
      groupType: 0,
      group_fzType: 0,
      tableData: [
        {
          date: "1000",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "1000",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "1000",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "1000",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "1000",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "1000",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "1000",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },
  mounted() {
    this.initEcharts(0);
  },
  created() {},
  watch: {
    contactsType: function (newData, oldData) {
      switch (newData) {
        case 0:
          this.initEcharts(0);
          break;
        case 1:
          this.initEcharts(1);
          break;
        case 2:
          this.initEcharts(2);
          break;
        case 3:
          this.initEcharts(3);
          break;
        case 4:
          this.initEcharts(4);
          break;

        default:
          break;
      }
    },
    activeName: function (newData, oldData) {
      switch (newData) {
        case "enterprise":
          this.initEcharts("2-1");
          break;
        case "group":
          this.initEcharts("3-1");
          break;
        default:
          break;
      }
    },
    // 群分析
    groupType: function (newData, oldData) {
      switch (newData) {
        case 0:
          this.initEcharts("3-1");
          break;
        case 1:
          this.initEcharts("3-2");
          break;
        default:
          break;
      }
    },
  },
  methods: {
    // 条件重置
    btnRefresh() {
      this.searchList = this.$options.data().searchList;
    },
    handleClick(tab, event) {
      this.activeName = tab.name;
    },
    // 联系人总览
    initEcharts(dex) {
      if (dex == 0) {
        // 联系人总览
        let option = {
          xAxis: {
            data: this.xData,
          },
          yAxis: {},
          series: [
            {
              type: "bar",
              data: this.yData,
              itemStyle: {
                color: "#0276FE",
              },
            },
          ],
        };
        let myChart = echarts.init(document.getElementById("mychart"));
        myChart.setOption(option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      } else if (dex == 1) {
        // 联系人跟进状态
        let option = {
          title: {
            left: "center",
            text: "联系人共计：1000",
          },
          tooltip: {},
          legend: {
            left: "right",
            top: "10",
            orient: "vertical",
            data: ["一季度", "二季度", "三季度", "四季度"],
          },
          dataset: {
            source: [
              ["quarter", "一季度", "二季度", "三季度", "四季度"],
              ["完美世界", 25.74, 25.7, 29.18, 21.58],
            ],
          },
          series: [
            {
              name: "完美世界",
              type: "pie",
              seriesLayoutBy: "row",
              encode: {
                itemName: 0, //数据项名称，在legend中展示
                value: 1,
              },
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  color: "#484",
                  fontSize: "30",
                  fontWeight: "bold",
                },
              },
              radius: ["50%", "70%"], //设置不同的内外半径
            },
          ],
        };
        let myChart = echarts.init(document.getElementById("lxr_gj_mychart"));
        myChart.setOption(option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      } else if (dex == 2) {
        // 新增来源分析
        let option = {
          title: {
            left: "center",
            text: "联系人共计：1000",
          },
          tooltip: {},
          legend: {
            left: "right",
            top: "10",
            orient: "vertical",
            data: ["一季度", "二季度", "三季度", "四季度"],
          },
          dataset: {
            source: [
              ["quarter", "一季度", "二季度", "三季度", "四季度"],
              ["完美世界", 25.74, 25.7, 29.18, 21.58],
            ],
          },
          series: [
            {
              name: "完美世界",
              type: "pie",
              seriesLayoutBy: "row",
              encode: {
                itemName: 0, //数据项名称，在legend中展示
                value: 1,
              },
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  color: "#484",
                  fontSize: "30",
                  fontWeight: "bold",
                },
              },
              radius: ["50%", "70%"], //设置不同的内外半径
            },
          ],
        };
        let myChart = echarts.init(document.getElementById("lxr_source_mychart"));
        myChart.setOption(option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      } else if (dex == 3) {
        // 新增好友分析
        let option = {
          xAxis: {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          yAxis: {
            type: "value",
          },
          legend: {
            data: ["A产品销量", "B产品销量", "C产品销量"],
            left: "right",
          },
          series: [
            {
              name: "A产品销量",
              data: [550, 232, 311, 764, 1090, 830, 500],
              type: "line",
              smooth: true,
            },
            {
              name: "B产品销量",
              data: [420, 162, 121, 474, 720, 640, 230],
              type: "line",
              smooth: true,
            },
            {
              name: "C产品销量",
              data: [850, 432, 501, 934, 1190, 930, 600],
              type: "line",
              smooth: true,
            },
          ],
        };
        let myChart = echarts.init(document.getElementById("lxr_hyfx_mychart"));
        myChart.setOption(option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      } else if (dex == 4) {
        // 企微标签分析
        let option = {
          tooltip: {},
          legend: {
            left: "left",
            textAlian: "center",
            orient: "vertical",
            data: ["一季度", "二季度", "三季度", "四季度"],
          },
          dataset: {
            source: [
              ["quarter", "一季度", "二季度", "三季度", "四季度"],
              ["完美世界", 25.74, 25.7, 29.18, 21.58],
            ],
          },
          series: [
            {
              name: "完美世界",
              type: "pie",
              seriesLayoutBy: "row",
              encode: {
                itemName: 0, //数据项名称，在legend中展示
                value: 1,
              },
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  color: "#484",
                  fontSize: "30",
                  fontWeight: "bold",
                },
              },
              radius: ["50%", "70%"], //设置不同的内外半径
            },
          ],
        };
        let myChart = echarts.init(
          document.getElementById("qw_grouping_mychart")
        );
        myChart.setOption(option);
        let myChart_1 = echarts.init(
          document.getElementById("qw_weixin_mychart")
        );
        myChart_1.setOption(option);
        let myChart_2 = echarts.init(document.getElementById("qw_key_mychart"));
        myChart_2.setOption(option);
        let myChart_3 = echarts.init(
          document.getElementById("qw_features_mychart")
        );
        myChart_3.setOption(option);
        let myChart_4 = echarts.init(
          document.getElementById("qw_industry_mychart")
        );
        myChart_4.setOption(option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
          myChart_1.resize();
          myChart_2.resize();
          myChart_3.resize();
          myChart_4.resize();
        });
      } else if (dex == 5) {
        // 业务标签分析
        let option = {
          tooltip: {},
          legend: {
            left: "left",
            textAlian: "center",
            orient: "vertical",
            data: ["一季度", "二季度", "三季度", "四季度"],
          },
          dataset: {
            source: [
              ["quarter", "一季度", "二季度", "三季度", "四季度"],
              ["完美世界", 25.74, 25.7, 29.18, 21.58],
            ],
          },
          series: [
            {
              name: "完美世界",
              type: "pie",
              seriesLayoutBy: "row",
              encode: {
                itemName: 0, //数据项名称，在legend中展示
                value: 1,
              },
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  color: "#484",
                  fontSize: "30",
                  fontWeight: "bold",
                },
              },
              radius: ["50%", "70%"], //设置不同的内外半径
            },
          ],
        };
        let myChart = echarts.init(document.getElementById("eColumnar"));
        myChart.setOption(option);
        let myChart_1 = echarts.init(document.getElementById("dColumnar"));
        myChart_1.setOption(option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
          myChart_1.resize();
        });
      } else if (dex == "2-1") {
        // 企业分析
        let option = {
          xAxis: {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          yAxis: {
            type: "value",
          },
          legend: {
            data: ["A产品销量"],
            left: "right",
          },
          series: [
            {
              name: "A产品销量",
              data: [550, 232, 311, 764, 1090, 830, 500],
              type: "line",
              smooth: true,
            },
          ],
        };
        setTimeout(() => {
          let myChart = echarts.init(document.getElementById("qy_mychart"));
          myChart.setOption(option);
          //随着屏幕大小调节图表
          window.addEventListener("resize", () => {
            myChart.resize();
          });
        }, 100);
      } else if (dex == "3-1") {
        // 群数量分析
        let option = {
          xAxis: {
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          yAxis: {},
          series: [
            {
              type: "bar",
              data: [23, 24, 18, 25, 27, 28, 25],
              itemStyle: {
                color: "#0276FE",
              },
            },
          ],
        };
        setTimeout(() => {
          let myChart = echarts.init(document.getElementById("nColumnar"));
          myChart.setOption(option);
          //随着屏幕大小调节图表
          window.addEventListener("resize", () => {
            myChart.resize();
          });
        }, 100);
      } else if (dex == "3-2") {
        // 群数量分析
        let option = {
          xAxis: {
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          yAxis: {},
          series: [
            {
              type: "bar",
              data: [23, 24, 18, 25, 27, 28, 25],
              itemStyle: {
                color: "#0276FE",
              },
            },
          ],
        };
        setTimeout(() => {
          let myChart = echarts.init(document.getElementById("mColumnar"));
          myChart.setOption(option);
          //随着屏幕大小调节图表
          window.addEventListener("resize", () => {
            myChart.resize();
          });
        }, 100);
      }
    },
  },
};
</script>
<style scoped>
.tabSummary /deep/ .el-table__footer-wrapper {
  position: absolute;
  top: 48px;
  left: 0;
}
.tabSummary /deep/ .el-table__body-wrapper {
  margin-top: 48px;
}
.echart {
  margin: auto;
  margin-top: 20px;
}
/* 企微标签 */
#Qwlabel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 14px;
}
#Qwlabel:nth-of-type(4n + 0) {
  margin-right: 0;
}
#Qwlabel .Qw1 {
  width: calc((100% - 20px) / 4);
  margin-bottom: 20px;
  border: 1px solid #e9e9e9;
}
#Qwlabel .Qw1 span {
  display: block;
  background-color: #f1f1f1;
  padding: 9px 12px;
  color: #666666;
}
/* 业务类型标签 */
#extension,
#development {
  margin: 14px 0;
  border: 1px solid #e9e9e9;
}
#extension span,
#development span {
  display: block;
  padding: 12px;
  border-bottom: 1px solid #e9e9e9;
}
.e_main {
  display: -webkit-box;
}
.e_main .eColumnar {
  border-right: 1px solid #e9e9e9;
}
.e_main .eTable {
  flex-grow: 1;
  width: 100%;
}
</style>